﻿@using Weather.BLL.Entity
@{
    Layout = null;
}

<!DOCTYPE html>

<html>
    <head>
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
        <title>空气质量</title>
        <style>
            *
            {
                margin: 0px;
                padding: 0px;
            }
        
            body
            {
                padding: 0;
                border: solid 0px blue;
                background-color: #D1E9FA;
                /*width: 1000px;*/
                margin: 0px auto;
                color: rgb(20,20,20);
                font-family: "宋体" ,Verdana, Helvetica, Sans-Serif;
                font-size: 9pt;
            }
        
            body a
            {
                color: rgb(20,20,20);
                text-decoration: none;
            }
            body img
            {
                border: none;
            }
            body p
            {
                text-indent: 2em;
            }
            a
            {
                text-decoration: none;
            }
            a:hover
            {
                color: red;
            }
        
            .fl
            {
                float: left;
            }
            .fr
            {
                float: right;
            }
            .b
            {
                border: 1px solid red;
            }
            .nb
            {
                border: none;
            }
            /*-- Page of AWS --*/
            .awsRightContent
            {
                position: absolute; z-index: 2; width: 100%;
                /*position: relative;
                width: 770px;
                height: 700px;
                background-color: white;
                border-right: 2px solid #2285da;
                */
            }
            /** AQI */
            .AQIPageTitle
            {
                margin-left: 10px;
                width: 200px;
                height: 30px;
                line-height: 30px;
                border: none;
                border-bottom: 1px dashed #2283D9;
                font-weight: bold;
                color: #2283D9;
            }
            .AQIKnowledgeTitle
            {
                font-weight: normal;
                margin-top: 5px;
                text-indent: 0em;
                line-height: 20px;
                color: darkcyan;
            }
            .AQIKnowledgeContent
            {
                font-size: 9pt;
                line-height: 150%;
                color: rgb(0,0,0);
            }
            .AQILegendBoxContainer
            {
                width: 12px;
                height: 14px;
                margin: 2px 3px 0px 10px;
            }
            .AQILegendBox
            {
                width: 12px;
                height: 12px;
                border: solid 1px grey;
            }
            .AQILegendText
            {
                height: 20px;
                line-height: 20px;
                border: solid 0px blue;
            }
        
            .nav
            {
                padding-left: 0;
                margin-bottom: 0;
                list-style: none;
            }
            .nav:before, .nav:after
            {
                display: table;
                content: " ";
            }
            .nav:after
            {
                clear: both;
            }
            .nav:before, .nav:after
            {
                display: table;
                content: " ";
            }
            .nav:after
            {
                clear: both;
            }
            .nav > li
            {
                position: relative;
                display: block;
            }
            .nav > li > a
            {
                position: relative;
                display: block;
                padding: 10px 15px;
            }
            .nav > li > a:hover, .nav > li > a:focus
            {
                text-decoration: none;
                background-color: #eee;
            }
            .nav > li.disabled > a
            {
                color: #999;
            }
            .nav > li.disabled > a:hover, .nav > li.disabled > a:focus
            {
                color: #999;
                text-decoration: none;
                cursor: not-allowed;
                background-color: transparent;
            }
            .nav .open > a, .nav .open > a:hover, .nav .open > a:focus
            {
                background-color: #eee;
                border-color: #428bca;
            }
            .nav .nav-divider
            {
                height: 1px;
                margin: 9px 0;
                overflow: hidden;
                background-color: #e5e5e5;
            }
            .nav > li > a > img
            {
                max-width: none;
            }
            .nav-tabs
            {
                border-bottom: 1px solid #ddd;
            }
            .nav-tabs > li
            {
                float: left;
                margin-bottom: -1px;
            }
            .nav-tabs > li > a
            {
                margin-right: 2px;
                line-height: 1.428571429;
                border: 1px solid transparent;
                border-radius: 4px 4px 0 0;
            }
            .nav-tabs > li > a:hover
            {
                border-color: #eee #eee #ddd;
            }
            .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus
            {
                color: #555;
                cursor: default;
                background-color: #fff;
                border: 1px solid #ddd;
                border-bottom-color: transparent;
            }
            .tab-content
            {
                border: 1px solid #c5d0dc;
                padding: 16px 12px;
                position: relative;
                z-index: 11;
            }
            .nav-tabs.padding-2
            {
                padding-left: 2px;
            }
            .nav-tabs
            {
                border-color: #c5d0dc;
                margin-bottom: 0;
                margin-left: 10px;
                position: relative;
                top: 1px;
            }
            .nav-tabs > li > a, .nav-tabs > li > a:focus
            {
                border-radius: 0 !important;
                background-color: #f9f9f9;
                color: #999;
                margin-right: -1px;
                line-height: 16px;
                position: relative;
                z-index: 11;
                border-color: #c5d0dc;
            }
            .nav-tabs > li > a:hover
            {
                background-color: #FFF;
                color: #4c8fbd;
                border-color: #c5d0dc;
            }
            .nav-tabs > li > a:active, .nav-tabs > li > a:focus
            {
                outline: none !important;
            }
            .nav-tabs > li:first-child > a
            {
                margin-left: 0;
            }
            .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus
            {
                color: #576373;
                border-color: #c5d0dc;
                border-top: 2px solid #4c8fbd;
                border-bottom-color: #4c8fbd;
                background-color: #FFF;
                /*border-bottom-color: transparent;
                background-color: #FFF;*/
                z-index: 12;
                line-height: 16px;
                margin-top: -1px;
                box-shadow: 0 -2px 3px 0 rgba(0,0,0,0.15);
            }
        </style>
        @Scripts.Render("~/bundles/jquery")
        <script src="/Scripts/hightcharts/highcharts.js"></script>
        <script>
            var AQIVarInfo = {
                'AQI': { 'title': '空气质量指数(AQI)', 'unit': 'μg/m<sup>3</sup>' },
                'PM25': { 'title': '颗粒物PM2.5', 'unit': 'μg/m<sup>3</sup>' },
                'PM10': { 'title': '颗粒物PM10', 'unit': 'μg/m<sup>3</sup>' },
                'SO2': { 'title': '二氧化硫(SO2)', 'unit': 'μg/m<sup>3</sup>' },
                'NO2': { 'title': '二氧化氮(NO2)', 'unit': 'μg/m<sup>3</sup>' },
                'O3': { 'title': '臭氧(O3)', 'unit': 'μg/m<sup>3</sup>' },
                'CO': { 'title': '一氧化碳(CO)', 'unit': 'mg/m<sup>3</sup>' }
            };

            var AQIClassInfo = [
                { name: '一级', valueMin: 0, valueMax: 50, color: 'RGB(0,228,0)', short: '优', descrition: '对健康影响情况：空气质量令人满意，基本无空气污染。建议采取的措施：各类人群可正常活动' },
                { name: '二级', valueMin: 51, valueMax: 100, color: 'RGB(255,255,0)', short: '良', descrition: '对健康影响情况：空气质量可接受，但某些污染物可能对极少数异常敏感人群健康有较弱影响。建议采取的措施：极少数异常敏感人群应减少户外运动' },
                { name: '三级', valueMin: 101, valueMax: 150, color: 'RGB(255,126,0)', short: '轻度污染', descrition: '对健康影响情况：易感人群症状有轻度加剧，健康人群出现刺激症状。建议采取的措施：儿童、老年人及心脏病、呼吸系统疾病患者应减少长时间、高强度的户外锻炼' },
                { name: '四级', valueMin: 151, valueMax: 200, color: 'RGB(255,0,0)', short: '中度污染', descrition: '对健康影响情况：进一步加剧易感人群症状，可能对健康人群心脏、呼吸系统有影响。建议采取的措施：儿童、老年人及心脏病、呼吸系统疾病患者避免长时间、高强度的户外锻炼，一般人群适量减少户外运动' },
                { name: '五级', valueMin: 201, valueMax: 300, color: 'RGB(153,0,76)', short: '重度污染', descrition: '对健康影响情况：心脏病和肺病患者症状显著加剧，运动耐受力降低，健康人群普遍出现症状。建议采取的措施：儿童、老年人及心脏病、肺病患者应停留在室内，停止户外运动，一般人群减少户外运动' },
                { name: '六级', valueMin: 300, valueMax: 999, color: 'RGB(126,0,35)', short: '严重污染', descrition: '对健康影响情况：健康人群运动耐受力降低，有明显强烈症状，提前出现某些疾病。建议采取的措施：儿童、老年人及心脏病、肺病患者应停留在室内，避免体力消耗，一般人群应避免户外运动' }
            ];

            var PM25ClassInfo = [
                { name: '一级', valueMin: 0, valueMax: 35, color: 'RGB(0,228,0)', short: '优' },
                { name: '二级', valueMin: 36, valueMax: 75, color: 'RGB(255,255,0)', short: '良' },
                { name: '三级', valueMin: 76, valueMax: 115, color: 'RGB(255,126,0)', short: '轻度污染' },
                { name: '四级', valueMin: 116, valueMax: 150, color: 'RGB(255,0,0)', short: '中度污染' },
                { name: '五级', valueMin: 151, valueMax: 250, color: 'RGB(153,0,76)', short: '重度污染' },
                { name: '六级', valueMin: 251, valueMax: 999, color: 'RGB(126,0,35)', short: '严重污染' }
            ];

            function AQIGetClass(value, defInfo) {
                if (defInfo == null) return null;
                for (var i = 0; i < defInfo.length; i++) {
                    if (value >= defInfo[i].valueMin && value <= defInfo[i].valueMax)
                        return defInfo[i];
                }
                return null;
            }

            function AQIGetColor(value) {
                for (var i = 0; i < AQIClassInfo.length; i++) {
                    if (value >= AQIClassInfo[i].valueMin && value <= AQIClassInfo[i].valueMax)
                        return AQIClassInfo[i].color;
                }
                return "RGB(255,255,255)";
            }

            DateFromString = function(dateString, fmt) {
                var o = {
                    "y+": 0,
                    "m+": 1,
                    "d+": 0,
                    "H+": 0,
                    "M+": 0,
                    "S+": 0
                };

                for (var k in o) {
                    var p = new RegExp("(" + k + ")", "g");
                    if (p.test(fmt)) {
                        var v = dateString.substr(p.lastIndex - RegExp.$1.length, RegExp.$1.length);
                        while (v.indexOf("0") == 0)
                            v = v.substr(1);

                        o[k] = parseInt((v == "" ? "0" : v));
                    }
                }

                //-- Padding year 
                if (o["y+"] < 50)
                    o["y+"] = 2000 + o["y+"];
                else if (o["y+"] <= 99)
                    o["y+"] = 1900 + o["y+"];

                var dt = new Date();
                dt.setFullYear(o["y+"], o["m+"] - 1, o["d+"]);
                dt.setHours(o["H+"], o["M+"], o["S+"]);

                return dt;
            };

            Date.prototype.format = function(fmt) {
                var o = {
                    "m+": this.getMonth() + 1,
                    "d+": this.getDate(),
                    "H+": this.getHours(),
                    "M+": this.getMinutes(),
                    "S+": this.getSeconds()
                };
                while (/(y+)/.test(fmt))
                    fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));

                for (var k in o)
                    while (new RegExp("(" + k + ")").test(fmt))
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;
            };

            Date.prototype.addHour = function(n) {
                var dt = new Date();
                dt.setTime(this.getTime() + n * 60 * 60 * 1000);
                return dt;
            };

           Date.prototype.addMinute = function(n) {
                var dt = new Date();
                dt.setTime(this.getTime() + n * 60 * 1000);
                return dt;
            };

           Date.prototype.addSecond = function(n) {
                var dt = new Date();
                dt.setTime(this.getTime() + n * 1000);
                return dt;
            };

           Date.prototype.getSpanHourFrom = function(dateIn) {
                var n = (this.getTime() - dateIn.getTime()) / 1000 / 60 / 60;
                return n;
            };
        </script>
    </head>
    <body>
        <div class="awsRightContent">
        @*
        <div class="fl" style="width: 100%; height: 90px; text-align: left;">
            <div class="AQIPageTitle">◇&nbsp;空气质量AQI指数预报</div>
            <div style="height: 75px;margin-left:10px; line-height: 25px; border: solid 0px blue;">
                <p>@ViewBag.FcstText</p>
            </div>
        </div>*@
        <!-- AQI observation  -->
        <div class="fl" style="position: relative; width: 100%; height: 435px; text-align: left;">
            <div class="AQIPageTitle">◇&nbsp;实时空气质量监测</div>
            <ul id="myTab" class="nav nav-tabs" style="width:95%">
                @*<li class="active" data="AQI"><a href="javascript:;" data-toggle="tab">AQI</a></li>*@
                <li class="active" data="PM25"><a href="javascript:;" data-toggle="tab">PM2.5</a></li>
                <li class="" data="PM10"><a href="javascript:;" data-toggle="tab">PM10</a></li>
                <li class="" data="SO2"><a href="javascript:;" data-toggle="tab">SO2</a></li>
                <li class="" data="NO2"><a href="javascript:;" data-toggle="tab">NO2</a></li>
                <li class="" data="O3"><a href="javascript:;" data-toggle="tab">O3</a></li>
                <li class="" data="CO"><a href="javascript:;" data-toggle="tab">CO</a></li>
            </ul>
            <div id="aqiTimeseries" style="margin-left: 10px;width: 95%; height: 300px; border-bottom: solid 0px grey;border-top: solid 0px grey"></div>
            
            <div style="width: 100%; height: 50px; border: solid 0px green;">
                <div style="margin-left: 15px; width: 90%; height: 25px; text-align: left; float: left;">
                    <div class="AQILegendText">选择地点：
                        @{
                            var sl = ViewBag.StationList as IList<WeatherAqiStationInfo>;
                            if (sl != null)
                            {
                                foreach (var weatherAqiStationInfo in sl)
                                {
                                    <a href='javascript:void(0);' onclick=" ChangeStationNum('@weatherAqiStationInfo.stationnum') ">@weatherAqiStationInfo.stationname</a>
                                }
                            }
                        }
                        
                    </div>
                </div>
                <div id='AQILegend' style="margin-right: 20px; width: 90%; height: 25px; text-align: right;float: right;">
                    <div class="AQILegendText fr">严重</div>
                    <div class="AQILegendBoxContainer fr">
                        <div class='AQILegendBox' style="background-color: rgb(126,0,35);"></div>
                    </div>
                    <div class="AQILegendText fr">重度</div>
                    <div class="AQILegendBoxContainer fr">
                        <div class='AQILegendBox' style="background-color: rgb(153,0,76);"></div>
                    </div>
                    <div class="AQILegendText fr">中度</div>
                    <div class="AQILegendBoxContainer fr">
                        <div class='AQILegendBox' style="background-color: rgb(255,0,0);"></div>
                    </div>
                    <div class="AQILegendText fr">轻度</div>
                    <div class="AQILegendBoxContainer fr">
                        <div class='AQILegendBox' style="background-color: rgb(255,126,0);"></div>
                    </div>
                    <div class="AQILegendText fr">良</div>
                    <div class="AQILegendBoxContainer fr">
                        <div class='AQILegendBox' style="background-color: rgb(255,255,0);"></div>
                    </div>
                    <div class="AQILegendText fr">优</div>
                    <div class="AQILegendBoxContainer fr">
                        <div class='AQILegendBox' style="background-color: rgb(0,228,0);"></div>
                    </div>
                </div>
            </div>
        </div>
        <!-- AQI Knowleadge  -->
        <div class="fl " style="width: 100%; height: 250px; text-align: left;">
            <div class="AQIPageTitle">◇&nbsp;环境空气质量知识</div>
            <div style="width: 95%; height: 200px; border: solid 0px green; margin: 0px 0px 0px 20px;">
                <p class="AQIKnowledgeTitle">1. 什么是AQI</p>
                <p class="AQIKnowledgeContent">AQI，即空气质量指数(Air Quality Index)，是定量描述空气质量状况的无量纲指数。</p>
                <p class="AQIKnowledgeTitle">2. 如何看懂AQI</p>
                <p class="AQIKnowledgeContent">AQI的数值越大、级别和类别越高、表征颜色越深，说明空气污染状况越严重，对人体的健康危害也就越大。</p>
                <p class="AQIKnowledgeTitle">3. 想了解权威环境空气质量和AQI的知识，请参考国家标准和行业标准</p>
                <p class="AQIKnowledgeContent">国家标准：环境空气质量标准 GB 3095-2012 (<a target="_blank" href='/Content/images/weather/GB3095-2012.pdf'>点击下载</a>)</p>
                <p class="AQIKnowledgeContent">行业标准：环境空气质量指数(AQI)技术规定(试行) HJ 633-2012 (<a target="_blank" href='/Content/images/weather/HJ633-2012.pdf'>点击下载</a>)</p>
            </div>
        </div>
    </div>
    </body>
</html>
<script>
    var weatherAqi = {};
    weatherAqi.gHourDelta = 1;
    weatherAqi.aqiType = 'PM25';
    weatherAqi.areaCode = '@ViewBag.AreaCode';
    weatherAqi.stationNum = '@ViewBag.FirstStationNum';
    //----------------------------------------
    //-- Load forecast when document is loading
    //----------------------------------------
    $(document).ready(function () {

        $("#myTab li").bind("click", function () {
            $("#myTab li").removeClass("active");
            $(this).addClass("active");
            weatherAqi.aqiType = $(this).attr("data");
            ShowAQITs();
        });

        ShowAQITs();
    });

    var ChangeStationNum = function (stationid) {
        weatherAqi.stationNum = stationid;
        ShowAQITs();
    };
    /**
    * Show time series of AQI related data
    */
    var ShowAQITs = function () {
        //-- Disable highcharts UTC
        Highcharts.setOptions({
            global: { useUTC: false }
        });
        var url = "/Wap/WeatherAQIData/" + weatherAqi.aqiType + "-" + weatherAqi.areaCode + "-" + weatherAqi.stationNum;
        //$("#aqiTimeseries").html("<img src='/themes/default/images/weather/waiting.gif'></img>数据查询中，请稍等……");
        if (weatherAqi.aqiType.toUpperCase() == "AQI" || weatherAqi.aqiType.toUpperCase() == "PM25") {
            $('#AQILegend').show();
        } else {
            $('#AQILegend').hide();
        }

        $.post(url, 0, function (jData) {
            var jResult = $.parseJSON(jData);
            var data = Array();
            var aqiClass = null;

            for (var i = 0; i < jResult.Times.length; i++) {
                var dt = DateFromString(jResult.Times[i], jResult.Times[i].length == 8 ? 'yyyymmdd' : 'yyyymmddHH');
                if (weatherAqi.aqiType.toUpperCase() == 'AQI')
                    aqiClass = AQIGetClass(jResult.Values[i], AQIClassInfo);
                if (weatherAqi.aqiType.toUpperCase() == "PM25")
                    aqiClass = AQIGetClass(jResult.Values[i], PM25ClassInfo);

                data.push({
                    x: dt.getTime(),
                    y: jResult.Values[i],
                    color: (aqiClass == null ? 'rgb(255,125,0)' : aqiClass.color),
                    classInfo: aqiClass
                });
            }

            $("#aqiTimeseries").highcharts({
                credits: { enabled: false },
                title: { text: "" + AQIVarInfo[weatherAqi.aqiType].title + (weatherAqi.gHourDelta > 1 ? "日平均" : "逐小时") + "监测值" },
                chart: { type: 'column' },
                xAxis: {
                    type: 'datetime',
                    tickInterval: (weatherAqi.gHourDelta > 1 ? 72 : 3) * 3600 * 1000,
                    dateTimeLabelFormats: {
                        day: '%m月%d日',
                        week: '%m月%d日',
                        month: '%m月'
                    }
                },
                yAxis: { title: { text: AQIVarInfo[weatherAqi.aqiType].title + (weatherAqi.aqiType.toUpperCase() == 'AQI' ? '' : ('(' + AQIVarInfo[weatherAqi.aqiType].unit) + ')')} },
                legend: { enabled: false },
                tooltip: {
                    formatter: function () {
                        var info = this.point.classInfo,
                            s = Highcharts.dateFormat('%Y年%m月%d日' + (weatherAqi.gHourDelta > 1 ? '' : '%H时'), this.x) + '<br/>' +
                                this.y + AQIVarInfo[weatherAqi.aqiType].unit + (info == null ? '' : (',' + info.name + "," + info.short));
                        return s;
                    }
                },
                series: [{
                    'data': data
                }]
            });
        });

    };
</script>
